﻿define(['services/logger', 'durandal/app'], function (logger, app) {
    
    // Command Structure observable
    function Photo(data) {
        this.PhotoId = ko.observable(data.PhotoId);
        this.AlbumId = ko.observable(data.AlbumId);
        this.Description = ko.observable(data.Description);
        this.UrlPhoto = ko.observable(data.UrlPhoto);
        this.CreatedOn = ko.observable(data.CreatedOn);
        this.ModifiedOn = ko.observable(data.ModifiedOn);
    };

    function SortedPhoto(id, position) {
        this.PhotoId = id;
        this.Position = position;
    };

    //View model observable
    var photos = ko.observableArray([]);
    var title = ko.observable("");


    var vm = {
        activate: activate,
        attached: attached,
        title: title,
        photos: photos,
        albumId: ko.observable(0)
    };

    return vm;

    //#region Internal Methods
    function activate(albumId) {

        this.albumId = albumId;
        var uri = '/api/1.0/Album/' + albumId;
        var promise = $.getJSON(uri).done(function (data) {
            // On success, 'data' contains all album including photos
            title(data.Name);
            logger.log(title() + ' album loaded ', null, title(), true);

            var results = $.map(data.Photos, function (item) {
                return new Photo(item)
            });
            photos(results);
        });
        return promise;
    }



    function attached(view, parent) {
        var self = this;
        var $container = $('.list-photo');

        /* Sortable function */
        $container.sortable(
            {
                placeholder: "list-photo-item-sortable",
                stop: function (e, ui) {

                    var results =  $.map($(this).find('li'), function (el) {
                        return new SortedPhoto(el.id, $(el).index());
                    });

                    var json = ko.toJSON(results)
                    var uri = '/api/1.0/Album/' + self.albumId + '/SendPositionPhoto';
                    $.ajax({
                        url: uri,
                        type: 'POST',
                        data: json,
                        contentType: "application/json;charset=utf-8",
                        success: function (data) {
                            var i = 0;
                        },
                        error: function (x, y, z) {
                            alert(x + '\n' + y + '\n' + z);
                        }
                    });
                }
            });
        $container.disableSelection();

        /* Upload tool */
        var dropbox = $('#dropbox')
        var uploadUri = '/upload/Album/' + self.albumId + '/UploadPhotos';
         
        dropbox.filedrop({
            // The name of the $_FILES entry:
            paramname: 'files',
            maxfiles: 10,
            maxfilesize: 10, // in mb
            url: uploadUri,

            uploadFinished: function (i, file, response) {
                var test = 0;
                // response is the JSON object that post_file.php returns
                var results = new Photo(response);
                photos.push(results);

            },
            error: function (err, file) {
                logger.log(err, null, 'Upload error', true);
            },
            // Called before each upload is started
            beforeEach: function (file) {
                if (!file.type.match(/^image\//)) {
                    alert('Only images are allowed!');

                    // Returning false will cause the
                    // file to be rejected
                    return false;
                }
            },

            uploadStarted: function (i, file, len) {
                //createImage(file);
            },

            progressUpdated: function (i, file, progress) {
                //$.data(file).find('.progress').width(progress);
            }

        });
        

    }


    //#endregion
});